<template>
  <el-form
    ref="param"
    class="doumee-form"
    :rules="rules"
    :model="param"
    label-width="auto"
    label-suffix="："
    @submit.native.prevent
  >
    <div class="property-titleb">
      {{ $t('message.dybqxz') }}<a target="_blank" href="**************" class="primaryColor pointer">{{ $t('message.mtkdb') }}</a>创建门店，并在<a target="_blank" href="**************" class="primaryColor pointer">{{ $t('message.mtbjxkfpt') }}</a>{{ $t('message.cjygcjcgpz') }}</div>
    <el-form-item label="Appkey" prop="appKey">
      <el-input v-model="param.appKey" class="w400" maxlength="50" :placeholder="$t('message.qsr')" />
      <span class="placeholder9 ml20">{{ $t('message.mtbjxck') }}</span>
    </el-form-item>
    <el-form-item label="Secret" prop="appSecret">
      <el-input v-model="param.appSecret" class="w400" maxlength="50" :placeholder="$t('message.qsr')" />
      <span class="placeholder9 ml20">{{ $t('message.mtbjxck') }}</span>
    </el-form-item>
    <el-form-item>
      <el-button :loading="onSubmitLoad" type="primary" @click="onSubmit('param', 2)">{{ $t('message.shouquan') }}</el-button>
    </el-form-item>
    <div class="property-titleb">{{ $t('message.debmdbd') }}</div>
    <el-form-item :label="$t('message.mdmc')" prop="storeName">
      <el-input v-model="param.storeName" maxlength="50" class="w400" readonly :placeholder="$t('message.djckmdxx')" />
      <el-button class="ml20" @click="getList">{{ $t('message.cxmd') }}</el-button>
    </el-form-item>
    <el-form-item>
      <el-button v-preventReClick :loading="onSubmitLoad" type="primary" @click="onSubmit('param', 1)">{{ $t('message.baocun') }}</el-button>
    </el-form-item>
    <el-dialog
      :title="$t('message.xzmd')"
      :visible.sync="isShow"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :append-to-body="true"
      width="700px"
    >

      <el-table
        ref="table"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column :label="$t('message.xzx')" width="80" align="center">
          <template slot-scope="scope">
            <el-radio v-model="tableRadio" :label="scope.$index">{{ xzm }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column :label="$t('message.mdmc')" align="center" min-width="100" prop="shopname" show-overflow-tooltip />
        <el-table-column :label="$t('message.chenshi')" align="center" min-width="100" prop="cityname" show-overflow-tooltip />
        <el-table-column :label="$t('message.xxdz')" align="center" min-width="100" prop="shopaddress" show-overflow-tooltip />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick :loading="relevanceLoading" type="primary" @click="relevanceStoreBtn">{{ $t('message.baocun') }}</el-button>
      </span>
    </el-dialog>
  </el-form>
</template>
<script>
import { mtconfigDetail, editMtConfig, mtGetSession, getOpenShopUuid, relevanceStore } from '@/api'
import store from '@/store'
export default {
  name: 'Meituan',
  data() {
    return {
      modalDialog: store.getters.dialog,
      meta: [],
      param: {},
      auth_code: '',
      rules: {
        appKey: [
          { required: true, message: this.$t('message.qsr') + 'app_key', trigger: 'blur' }
        ],
        appSecret: [
          { required: true, message: this.$t('message.qsr') + 'AppSecret', trigger: 'blur' }
        ]
      },
      isShow: false,
      listLoading: false,
      relevanceLoading: false,
      onSubmitLoad: false,
      list: [],
      xzm: '',
      tableRadio: 0
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.mtconfigDetail()
  },
  methods: {
    onSubmit(formName, type) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that.onSubmitLoad = true
          const param = { ...that.param }
          param.platform = '1'
          param.venueId = sessionStorage.getItem('venueId')
          editMtConfig({ param }, sessionStorage.getItem('venueId')).then(res => {
            that.onSubmitLoad = false
            if (res.errorCode === '000000') {
              if (type === 1) {
                that.$message.success(this.$t('message.bccg'))
              } else {
                window.location.href = '**************' + this.param.appKey + '&redirect_url=' + process.env.VUE_APP_BASE_URL + '/%23/application/groupBuy&type=3&state=teststate&scope=[%22tuangou%22,%22ugc%22]'
              }
            }
          }).catch(err => {
            that.onSubmitLoad = false
            console.log(err)
          })
        }
      })
    },
    getList() {
      this.listLoading = true
      const that = this
      getOpenShopUuid({
        param: { platform: '1' }
      }, sessionStorage.getItem('venueId')).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          const arr = res.recordList || []
          if (arr.length > 0) {
            if (arr.length === 1) {
              const param = arr[0]
              param.platform = '1'
              relevanceStore({ param }).then(resb => {
                if (resb.errorCode === '000000') {
                  that.$message.success(this.$t('message.hqmdcg'))
                  that.mtconfigDetail()
                }
              })
            } else {
              this.isShow = true
              let b = 0
              arr.forEach((e, index) => {
                if (e.storeName === this.param.storeName) {
                  b = index
                }
              })
              this.list = arr
              this.tableRadio = b
              this.$refs.table.doLayout()
            }
          } else {
            this.$message.info(this.$t('message.zwmf'))
          }
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    handleSelectionChange(currentRow) {
      console.log(12312, currentRow)
    },
    relevanceStoreBtn() {
      if (this.list && this.list.length > 0) {
        const param = this.list[this.tableRadio]
        param.platform = '1'
        this.relevanceLoading = true
        relevanceStore({ param }).then(res => {
          this.relevanceLoading = false
          if (res.errorCode === '000000') {
            this.$message.success(this.$t('message.bccg'))
            this.mtconfigDetail()
          }
        }).catch(() => {
          this.relevanceLoading = false
        })
      }
    },
    mtGetSession() {
      const venueId = sessionStorage.getItem('venueId')
      mtGetSession({ param: { venueId, authCode: this.auth_code }}).then(res => {
        if (res.errorCode === '000000') {
          // this.getList(1)
        }
      })
    },
    mtconfigDetail() {
      const venueId = sessionStorage.getItem('venueId')
      mtconfigDetail({ param: { venueId, platform: '1' }}).then(res => {
        if (res.errorCode === '000000') {
          this.param = res.record || {}
          this.$refs.param.clearValidate()
        } else {
          this.param = {}
          this.$refs.param.clearValidate()
        }
      })
    }

  }
}
</script>
<style scoped lang="scss">
.property-titleb {
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
